<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>
    <link rel="stylesheet" href="/Modules/system/layuimini/lib/layui-v2.5.5/css/layui.css" media="all">
</head>
<body>


{{--<button type="button" id="btn2" class="layui-btn  layui-btn-primary">获取勾选数据</button>--}}

{{--<button type="button" id="btn1" class="layui-btn  layui-btn-primary">添加最上级行</button>--}}
{{--<button type="button" id="btn2" class="layui-btn  layui-btn-primary">获取勾选数据</button>--}}
{{--<button type="button" id="btn3" class="layui-btn  layui-btn-primary">获取全部数据</button>--}}

{{--<button type="button" id="btn4" class="layui-btn  layui-btn-primary">关闭勾选节点</button>--}}
{{--<button type="button" id="btn5" class="layui-btn  layui-btn-primary">展开勾选节点</button>--}}

{{--<button type="button" id="btn6" class="layui-btn  layui-btn-primary">关闭所有子叶节点</button>--}}

{{--<div type="button" class="layui-btn layui-btn-primary determine">确定</div>--}}

<button style="opacity: 0;" type="button" id="btn7" class="layui-btn layui-btn-primary">展开所有子叶节点</button>

{{--<button type="button" id="btn8" class="layui-btn  layui-btn-primary">获取表格树配置</button>--}}
{{--<button type="button" id="btn9" class="layui-btn  layui-btn-primary">重载表格树</button>--}}
{{--<button type="button" id="btn10" class="layui-btn  layui-btn-primary">删除选中行</button>--}}


<script type="text/html" id="toolbarTou">
    <div class="layui-btn-container">

{{--        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>--}}
{{--        <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>--}}

        <div class="layui-btn layui-btn-normal layui-btn-sm determine" lay-event="determine"> 确定 </div>

    </div>
</script>


<table class="layui-hide" id="tableId" lay-filter="tableEvent"></table>



</body>

{{--<script src="/Modules/system/layuimini/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>--}}

<script src="/Modules/system/layui-v2.5.7/layui/layui.js" charset="utf-8"></script>

<script>

    layui.config({
        base: '/Modules/system/layuimini/js/lay-module/tableTree/'
    }).extend({
        tableEdit: 'js/tableEdit'  //表格树依赖我另外写的tableEdit模块，本项目就有。
        , tableTree: 'js/tableTree'
    }).use(['table', 'layer', "tableTree"], function () {

        var table = layui.table
            , $ = layui.$
            , tableTree = layui.tableTree;
        var params = [
              {name: 1, value: "张三1"}
            , {name: 2, value: "张三2"}
            , {name: 3, value: "张三3"}
            , {name: 4, value: "张三4"}
            , {name: 5, value: "张三5"}
        ];

        function templet(d, field) {
            if (!d[field]) return '';
            if (typeof d[field] === 'string') return d[field];
            if (!Array.isArray(d[field])) return d[field].value ? d[field].value : '';
            var str = [];
            d[field].forEach(function (e) {
                str.push(e.value)
            });
            return str.join(' || ');
        }

        var treeTable = tableTree.render({
            elem: '#tableId', id: 'tableTree',
            toolbar: '#toolbarTou',
            //url: '/Modules/system/layuimini/js/lay-module/tableTree/json/data.json',
            url: '/chinadmin/admin/Role/roleControllerData?id={{$id}}',

            height: 'full-90'
            , page: true
            , treeConfig: {         //表格树所需配置
                showField: 'name'   //表格树显示的字段
                , treeid: 'id'      //treeid所对应字段的值在表格数据中必须是唯一的，且不能为空。
                , treepid:          'pid'//父级id字段名称
                , iconClass: 'layui-icon-triangle-r' //小图标class样式 窗口图标 layui-icon-layer
            }
            , cols: [[
                {type: 'checkbox'}
                , {field: 'name', title: 'name', width: 259}
                , {field: 'id', title: 'id', width: 120, sort: true}
                // , {
                //     field: 'danxuan', align: 'center', event: 'danxuan'
                //     , config: {type: 'select', data: params}
                //     , title: '单选', width: 120, templet: templet
                // }
                // , {
                //     field: 'duoxuan', title: '多选', event: 'duoxuan'
                //     , config: {type: 'select', data: params, enabled: true}
                //     , width: 120, templet: templet
                // }
                // , {
                //     field: 'birthday', title: '生日', width: 120, event: 'duoxuan'
                //     , config: {type: 'date', dateType: 'date'}, templet: templet
                // }
                // , {
                //     field: 'aihao', title: '爱好', width: 120, event: 'aihao'
                //     , config: {type: 'input'}, templet: templet
                // }
            ]]
        });

        //button::有罪
        table.on('toolbar(tableEvent)', function (obj) {

            console.log(obj.event);
            if(obj.event == 'determine'){
                console.log(treeTable.getCheckedData()); //获取选中行数据

                $.ajax({
                    type: "POST",
                    url: "/chinadmin/admin/AuthRoleController/create",
                    timeout: 100000, //超时时间设置，单位毫秒 为一秒
                    data: {
                        data: treeTable.getCheckedData(),
                        role_id: '{{$id}}',
                    },
                    dataType: "json",      //如果有此选项成功返回的json会自动变成对象，如果没有需要用JSON.parse()转换
                    success: function (data) {
                        console.log(data);
                        layer.msg(data.msg);
                    }
                });

            }



        });

        /**
         * 表格树排序，与layui进行了整合。
         */
        table.on('sort(tableEvent)', function (obj) {
            treeTable.sort({field: obj.field, desc: obj.type === 'desc'})
        });


        $('button').click(function () {

            treeTable.openAllRows(); //展开所有树节点
            return false;

            var id = $(this).attr("id");
            if (id === "btn1") {
                //data可以为空，为空则创建空行，否则按照data数据生成行
                var data = {
                    "id": 13,
                    "pid": 333,
                    "name": "张三13",
                    "danxuan": null,
                    "duoxuan": [{"name": 1, "value": "张三1"}, {"name": 2, "value": "张三2"}],
                    "birthday": ""
                };
                treeTable.addTopRow(data);//该方法生成的行是最上级的行
            } else if (id === 'btn2') {
                console.log(treeTable.getCheckedData()); //获取选中行数据
            } else if (id === 'btn3') {
                console.log(treeTable.getTableTreeData()); //获取表格树所有数据
            } else if (id === 'btn4') {
                treeTable.closeCheckedRows(); // 关闭选中行树节点
            } else if (id === 'btn5') {
                treeTable.openCheckedRows(); // 展开选中行树节点
            } else if (id === 'btn6') {
                treeTable.closeAllRows();  //关闭所有树节点
            } else if (id === 'btn7') {
                treeTable.openAllRows(); //展开所有树节点
            } else if (id === 'btn8') {
                console.log(treeTable.getTreeOptions()); //获取表格配置
            } else if (id === 'btn9') {
                treeTable.reload(); //表格树进行reload
            } else {
                treeTable.delCheckedRows(); //删除选中行
            }
        });

        setTimeout(function () {
            $('#btn7').click();
        },1000);


    });



</script>
</html>